<template>
    <view class="container">
        <!--header-->
        <view class="tui-header">
            <view class="tui-rolling-search">
                <view
                    ><tui-icon name="search" :size="16" color="#999"></tui-icon
                ></view>
                <swiper
                    vertical
                    autoplay
                    circular
                    interval="8000"
                    class="tui-swiper"
                >
                    <swiper-item
                        v-for="(item, index) in hotSearchInput"
                        :key="index"
                        class="tui-swiper-item"
                        @tap="goGoodsSearch(item)"
                    >
                        <view class="tui-hot-item">{{ item }}</view>
                    </swiper-item>
                </swiper>
            </view>
        </view>
        <!--header-->
        <view class="tui-header-banner">
            <view class="tui-banner-bg">
                <view class="tui-primary-bg tui-route-left"></view>
                <view class="tui-primary-bg tui-route-right"></view>
                <!--banner-->
                <view class="tui-banner-box">
                    <swiper
                        :indicator-dots="true"
                        :autoplay="true"
                        :interval="5000"
                        :duration="150"
                        class="tui-banner-swiper"
                        :circular="true"
                        indicator-color="rgba(255, 255, 255, 0.8)"
                        indicator-active-color="#fff"
                    >
                        <swiper-item
                            v-for="(item, index) in wxBannerList"
                            :key="index"
                            @tap.stop="goWxBannerUrl(item.jump_url)"
                        >
                            <image
                                :src="item.img_logo"
                                class="tui-slide-image"
                                mode="scaleToFill"
                            />
                        </swiper-item>
                    </swiper>
                </view>
            </view>
        </view>

        <view class="tui-product-category">
            <view v-if="false" class="tui-rolling-news">
                <tui-icon name="notice" :size="24" color="#f54f46"></tui-icon>
                <swiper
                    vertical
                    autoplay
                    circular
                    interval="3000"
                    class="tui-swiper"
                >
                    <swiper-item
                        v-for="(item, index) in systemNoticeOrder"
                        :key="index"
                        class="tui-swiper-item"
                    >
                        <view class="tui-news-item">{{ item }}</view>
                    </swiper-item>
                </swiper>
            </view>

            <block class="tui-category-block">
                <view class="tui-category-item" @tap="goSiteTerm(1)">
                    <image
                        src="/static/icons/goods-nav.png"
                        class="tui-category-img"
                        mode="scaleToFill"
                    ></image>
                    <view class="tui-category-name">企业简介</view>
                </view>
                <view class="tui-category-item" @tap="goSiteTerm(2)">
                    <image
                        src="/static/icons/icons.png"
                        class="tui-category-img"
                        mode="scaleToFill"
                    ></image>
                    <view class="tui-category-name">活动规则</view>
                </view>
                <view
                    v-if="shopId != 600"
                    class="tui-category-item"
                    @tap="goSiteTerm(3)"
                >
                    <image
                        src="/static/icons/fav.png"
                        class="tui-category-img"
                        mode="scaleToFill"
                    ></image>
                    <view class="tui-category-name">联系我们</view>
                </view>

                <view
                    v-if="shopId == 100"
                    class="tui-category-item"
                    @tap="goShopPayOnline()"
                >
                    <image
                        src="/static/icons/card.png"
                        class="tui-category-img"
                        mode="scaleToFill"
                    ></image>
                    <view class="tui-category-name">在线支付</view>
                </view>

                <view
                    v-if="shopId == 200"
                    class="tui-category-item"
                    @tap="goShopTicketIndex()"
                >
                    <image
                        src="/static/icons/search-bar.png"
                        class="tui-category-img"
                        mode="scaleToFill"
                    ></image>
                    <view class="tui-category-name">我的水票</view>
                </view>

                <view
                    v-if="shopId == 200"
                    class="tui-category-item"
                    @tap="goShopBranch()"
                >
                    <image
                        src="/static/icons/group.png"
                        class="tui-category-img"
                        mode="scaleToFill"
                    ></image>
                    <view class="tui-category-name">附近水站</view>
                </view>

                <view
                    v-if="shopId == 211"
                    class="tui-category-item"
                    @tap="goShopTicketIndex()"
                >
                    <image
                        src="/static/icons/search-bar.png"
                        class="tui-category-img"
                        mode="scaleToFill"
                    ></image>
                    <view class="tui-category-name">我的水票</view>
                </view>

                <view
                    v-if="shopId == 211"
                    class="tui-category-item"
                    @tap="goShopBranch()"
                >
                    <image
                        src="/static/icons/group.png"
                        class="tui-category-img"
                        mode="scaleToFill"
                    ></image>
                    <view class="tui-category-name">附近水站</view>
                </view>

                <view v-if="shopId == 300">
                    <view class="tui-category-item" @tap="goSiteTerm(11)">
                        <image
                            src="/static/icons/tag.png"
                            class="tui-category-img"
                            mode="scaleToFill"
                        ></image>
                        <view class="tui-category-name">企业荣誉</view>
                    </view>
                    <view class="tui-category-item" @tap="goSiteTerm(12)">
                        <image
                            src="/static/icons/popup.png"
                            class="tui-category-img"
                            mode="scaleToFill"
                        ></image>
                        <view class="tui-category-name">企业宣传片</view>
                    </view>
                    <view class="tui-category-item" @tap="goSiteTerm(13)">
                        <image
                            src="/static/icons/icon_7.png"
                            class="tui-category-img"
                            mode="scaleToFill"
                        ></image>
                        <view class="tui-category-name">乌蒙药交会</view>
                    </view>
                    <view class="tui-category-item" @tap="goSiteTerm(14)">
                        <image
                            src="/static/icons/icon_1.png"
                            class="tui-category-img"
                            mode="scaleToFill"
                        ></image>
                        <view class="tui-category-name">爱心公益</view>
                    </view>
                    <view class="tui-category-item" @tap="goSiteTerm(15)">
                        <image
                            src="/static/icons/nav-bar.png"
                            class="tui-category-img"
                            mode="scaleToFill"
                        ></image>
                        <view class="tui-category-name">企业快讯</view>
                    </view>

                    <view class="tui-category-item" @tap="goShopBranchCct(1)">
                        <image
                            src="/static/icons/link.png"
                            class="tui-category-img"
                            mode="scaleToFill"
                        ></image>
                        <view class="tui-category-name">加盟店</view>
                    </view>
                    <view class="tui-category-item" @tap="goShopBranchCct(2)">
                        <image
                            src="/static/icons/indexed-list.png"
                            class="tui-category-img"
                            mode="scaleToFill"
                        ></image>
                        <view class="tui-category-name">经销商</view>
                    </view>
                </view>

                <view
                    v-if="shopId == 400"
                    class="tui-category-item"
                    @tap="goShopPayOnline()"
                >
                    <image
                        src="/static/icons/card.png"
                        class="tui-category-img"
                        mode="scaleToFill"
                    ></image>
                    <view class="tui-category-name">在线支付</view>
                </view>

                <block v-if="shopId == 600">
                    <view class="tui-category-item" @tap="goRedEnvelopePage()">
                        <image
                            src="/static/icons/tag.png"
                            class="tui-category-img"
                            mode="scaleToFill"
                        ></image>
                        <view class="tui-category-name">天天红包</view>
                    </view>
                    <view class="tui-category-item" @tap="goShopIndex()">
                        <image
                            src="/static/icons/link.png"
                            class="tui-category-img"
                            mode="scaleToFill"
                        ></image>
                        <view class="tui-category-name">悬赏邀约</view>
                    </view>
                    <!-- <view class="tui-category-item" @tap="goComingSoon()">
						<image src="/static/icons/popup.png" class="tui-category-img" mode="scaleToFill"></image>
						<view class="tui-category-name">排队红包</view>
					</view> -->
                    <!-- <view class="tui-category-item" @tap="goComingSoon()">
						<image src="/static/icons/icon_7.png" class="tui-category-img" mode="scaleToFill"></image>
						<view class="tui-category-name">佳米商城</view>
					</view> -->
                    <view
                        class="tui-category-item"
                        @tap="
                            goUrlHttp(
                                'https://mp.weixin.qq.com/s/1xFcvq1shadX3YYHK9Gmfw'
                            )
                        "
                    >
                        <image
                            src="/static/icons/fav.png"
                            class="tui-category-img"
                            mode="scaleToFill"
                        ></image>
                        <view class="tui-category-name">商学院</view>
                    </view>
                    <!-- <view class="tui-category-item" @tap="goComingSoon()">
						<image src="/static/icons/icon_1.png" class="tui-category-img" mode="scaleToFill"></image>
						<view class="tui-category-name">消费返本</view>
					</view>
					<view class="tui-category-item" @tap="goComingSoon()">
						<image src="/static/icons/nav-bar.png" class="tui-category-img" mode="scaleToFill"></image>
						<view class="tui-category-name">附近商家</view>
					</view> -->
                    <!-- <view class="tui-category-item" @tap="goComingSoon()">
						<image src="/static/icons/indexed-list.png" class="tui-category-img" mode="scaleToFill"></image>
						<view class="tui-category-name">秒杀团购</view>
					</view> -->
                </block>

                <view
                    v-if="shopId == 88"
                    class="tui-category-item"
                    @tap="goShopPayOnline()"
                >
                    <image
                        src="/static/icons/card.png"
                        class="tui-category-img"
                        mode="scaleToFill"
                    ></image>
                    <view class="tui-category-name">在线支付</view>
                </view>

                <block v-if="shopId == 99">
                    <view class="tui-category-item" @tap="goComingSoon()">
                        <image
                            src="/static/icons/nav-bar.png"
                            class="tui-category-img"
                            mode="scaleToFill"
                        ></image>
                        <view class="tui-category-name">附近商家</view>
                    </view>
                    <view class="tui-category-item" @tap="goComingSoon()">
                        <image
                            src="/static/icons/link.png"
                            class="tui-category-img"
                            mode="scaleToFill"
                        ></image>
                        <view class="tui-category-name">招商加盟</view>
                    </view>
                    <view class="tui-category-item" @tap="goComingSoon()">
                        <image
                            src="/static/icons/tag.png"
                            class="tui-category-img"
                            mode="scaleToFill"
                        ></image>
                        <view class="tui-category-name">每日签到</view>
                    </view>
                    <view
                        v-if="false"
                        class="tui-category-item"
                        @tap="goComingSoon()"
                    >
                        <image
                            src="/static/icons/popup.png"
                            class="tui-category-img"
                            mode="scaleToFill"
                        ></image>
                        <view class="tui-category-name">领券中心</view>
                    </view>
                    <view class="tui-category-item" @tap="goComingSoon()">
                        <image
                            src="/static/icons/indexed-list.png"
                            class="tui-category-img"
                            mode="scaleToFill"
                        ></image>
                        <view class="tui-category-name">秒杀团购</view>
                    </view>
                    <view class="tui-category-item" @tap="goPointGoodsList()">
                        <image
                            src="/static/icons/icon_7.png"
                            class="tui-category-img"
                            mode="scaleToFill"
                        ></image>
                        <view class="tui-category-name">积分商城</view>
                    </view>
                    <view
                        class="tui-category-item"
                        @tap="goMallGroupGoodsList()"
                    >
                        <image
                            src="/static/icons/icon_1.png"
                            class="tui-category-img"
                            mode="scaleToFill"
                        ></image>
                        <view class="tui-category-name">团购商城</view>
                    </view>
                    <view class="tui-category-item" @tap="goShopPayOnline()">
                        <image
                            src="/static/icons/card.png"
                            class="tui-category-img"
                            mode="scaleToFill"
                        ></image>
                        <view class="tui-category-name">在线支付</view>
                    </view>
                </block>
            </block>
        </view>

        <view v-if="hasNotice == 1" class="tui-notice-board">
            <view class="tui-icon-bg">
                <tui-icon
                    name="news-fill"
                    :size="24"
                    color="#f54f46"
                ></tui-icon>
            </view>
            <view class="tui-scorll-view">
                <view
                    class="tui-notice"
                    :class="[animation ? 'tui-animation' : '']"
                    >{{ systemNotice }}</view
                >
            </view>
        </view>

        <view class="tui-product-box">
            <view v-if="false" class="tui-group-name">
                <text>商品推荐</text>
            </view>
            <tui-tabs
                :tabs="goodsTabs"
                :currentTab="currentTab"
                @change="goodsTabChange"
            ></tui-tabs>
            <view class="tui-product-list">
                <view class="tui-product-container">
                    <block
                        v-for="(item, index) in goodsHotList"
                        :key="index"
                        v-if="(index + 1) % 2 != 0"
                    >
                        <!--商品列表-->
                        <view
                            class="tui-pro-item"
                            hover-class="hover"
                            :hover-start-time="150"
                            @tap="goGoodsView(item.id)"
                        >
                            <!-- 主图片  叠加的标签图片 -->
                            <div class="image-container">
                                <image
                                    :src="item.img_logo"
                                    class="tui-pro-img main-image"
                                    alt="商品主图"
                                    mode="widthFix"
                                />
                                <image
                                    v-if="item.shop_branch_oto == 1"
                                    src="/static/wz/shop_oto_tag.png"
                                    class="tag-image"
                                    alt="到店消费"
                                    mode="widthFix"
                                />
                            </div>

                            <view class="tui-pro-content">
                                <view class="tui-pro-tit">{{ item.name }}</view>
                                <view>
                                    <view class="tui-pro-price">
                                        <text class="tui-sale-price"
                                            >￥{{ item.money }}</text
                                        >
                                        <text
                                            v-if="item.money_old > 0"
                                            class="tui-factory-price"
                                            >￥{{ item.money_old }}</text
                                        >
                                    </view>
                                </view>
                            </view>
                        </view>
                        <!--商品列表-->
                    </block>
                </view>
                <view class="tui-product-container">
                    <block
                        v-for="(item, index) in goodsHotList"
                        :key="index"
                        v-if="(index + 1) % 2 == 0"
                    >
                        <!--商品列表-->
                        <view
                            class="tui-pro-item"
                            hover-class="hover"
                            :hover-start-time="150"
                            @tap="goGoodsView(item.id)"
                        >
                            <!-- 主图片  叠加的标签图片 -->
                            <div class="image-container">
                                <image
                                    :src="item.img_logo"
                                    class="tui-pro-img main-image"
                                    alt="商品主图"
                                    mode="widthFix"
                                />
                                <image
                                    v-if="item.shop_branch_oto == 1"
                                    src="/static/wz/shop_oto_tag.png"
                                    class="tag-image"
                                    alt="到店消费"
                                    mode="widthFix"
                                />
                            </div>

                            <view class="tui-pro-content">
                                <view class="tui-pro-tit">{{ item.name }}</view>
                                <view>
                                    <view class="tui-pro-price">
                                        <text class="tui-sale-price"
                                            >￥{{ item.money }}</text
                                        >
                                        <text
                                            v-if="item.money_old > 0"
                                            class="tui-factory-price"
                                            >￥{{ item.money_old }}</text
                                        >
                                    </view>
                                </view>
                            </view>
                        </view>
                        <!--商品列表-->
                    </block>
                </view>
            </view>
        </view>

        <!--加载loadding-->
        <view class="tui-safearea-bottom"></view>
    </view>
</template>
<script>
import footerMenu from "@/components/footer-menu.vue";
import tuiIcon from "@/components/thorui/tui-icon/tui-icon.vue";
import tuiTag from "@/components/thorui/tui-tag/tui-tag";
import tuiLoadmore from "@/components/thorui/tui-loadmore/tui-loadmore";
import tuiNomore from "@/components/thorui/tui-nomore/tui-nomore";
import tuiFab from "@/components/thorui/tui-fab/tui-fab";
import tuiTabs from "@/components/thorui/tui-tabs/tui-tabs.vue";
export default {
    components: {
        footerMenu,
        tuiIcon,
        tuiTag,
        tuiLoadmore,
        tuiNomore,
        tuiTabs,
    },
    data() {
        return {
            shopId: 0,
            hasNotice: false,
            systemNotice: "",
            hotSearchInput: [],
            hotSearchTag: [],

            animation: false,
            wxBannerList: [], //微信端的广告图
            wxHomeAd: [], //微信端的广告图

            pageIndex: 1,
            goodsCateMain: [],
            goodsNewList: [],
            goodsHotList: [],

            hasNoticeOrder: true,
            systemNoticeOrder: [],

            noMoreData: false,
            loadding: false,
            pullUpOn: true,

            cateId: 0,
            currentTab: 0,
            goodsTabs: [
                //0-10是保留分类字段
                { name: "全部", cate_id: 0 },
                { name: "新品", cate_id: 1 },
                { name: "热销", cate_id: 2 },
                { name: "推荐", cate_id: 3 },
            ],
        };
    },

    onLoad: function (options) {
        //this.doSnowStar();		//下雪的效果
        /* let wxId = options.wx_id || 0;	//入口文件写入wxId
		if(wxId) {
			uni.setStorageSync('wxId', wxId);
			let shopId = uni.getStorageSync('shopId');
			if(wxId != shopId) {
				uni.navigateTo({ url: '/pages/my/login' })
			}
		}
		if(!uni.getStorageSync('hasLogin')) {
			uni.navigateTo({ url: '/pages/my/login' })
		} */

        let shopIdUrl = options.shop_id || 0; //页面链接
        let shopIdSync = uni.getStorageSync("shopId"); //localStorage
        let shopId = shopIdUrl || shopIdSync || 99; //优先取页面-再去取缓存-再给默认值
        uni.setStorageSync("shopId", shopId);
        this.shopId = shopId;

        setTimeout(() => {
            this.animation = true;
        }, 600);
        this.getWxHomeSet();
        this.getWxBannerList();

        //	this.getWxHomeAd();
        this.getGoodsCateMain();
        this.getGoodsHotList();
    },

    methods: {
        goComingSoon: function () {
            this.tui.toast("即将开启，敬请期待...");
            return false;
        },
        goRedEnvelopePage: function (msg) {
            uni.navigateTo({ url: "/pages/site/redEnvelope" });
        },
        goSiteTerm: function (type) {
            uni.navigateTo({
                url: "/pages/site/term?type=" + type,
            });
        },

        //在线下单
        goShopPayOnline: function () {
            uni.navigateTo({
                url: "/pages/shop/pay-online",
            });
        },

        goShopBranch: function () {
            uni.navigateTo({
                url: "/pages/shop/branch",
            });
        },

        //爨草堂--加盟店
        goShopBranchCct: function (e) {
            uni.navigateTo({
                url: "/pages/shop/branch-cct?type=" + e,
            });
        },

        goPointGoodsList: function () {
            uni.navigateTo({
                url: "/pages/point/goods-list",
            });
        },

        goShopIndex: function () {
            uni.switchTab({
                url: "/pages/shop/index",
            });
        },

        goGoodsCate: function () {
            uni.switchTab({
                url: "/pages/goods/cate",
            });
        },

        goGoodsIndex: function (type) {
            if (type == "sortNew") {
                uni.navigateTo({
                    url: "/pages/goods/index?sort=new",
                });
            } else {
                uni.navigateTo({
                    url: "/pages/goods/index",
                });
            }
        },

        goGoodsIndexCateMain: function (e) {
            uni.navigateTo({
                url: "/pages/goods/index?cate=" + e,
            });
        },

        goGoodsView: function (e) {
            uni.navigateTo({
                url: "/pages/goods/view?id=" + e,
            });
        },

        goGoodsSearch: function (e) {
            return false;
            uni.navigateTo({
                url: "/pages/goods/index?searchKey=" + e,
            });
        },

        //我的水票
        goShopTicketIndex: function () {
            uni.navigateTo({
                url: "/pages/shop/ticket-index",
            });
        },

        goMallGroupGoodsList: function () {
            uni.navigateTo({
                url: "/pages/mall-group/goods-list",
            });
        },

        //
        goWxBannerUrl: function (url) {
            return false;
            uni.navigateTo({
                url: url,
            });
        },

        //
        goUrl: function (url) {
            uni.navigateTo({
                url: url,
            });
        },

        //跳转到完整的网页
        goUrlHttp: function (url) {
            window.open(url);
        },

        //切换tab，逻辑请自行处理
        goodsTabChange(e) {
            this.currentTab = e.index;
            this.cateId = e.item.cate_id || 0;
            this.getGoodsHotList();
        },

        getWxHomeSet: function () {
            uni.request({
                url: this.$apiUrl + "/api/home/homeSet",
                header: {
                    userId: uni.getStorageSync("userId"),
                    userToken: uni.getStorageSync("userToken"),
                    shopId: uni.getStorageSync("shopId"),
                },
                success: (res) => {
                    let resData = res.data["data"];
                    this.hasNotice = resData.has_notice;
                    this.systemNotice = resData.system_notice;
                    this.hasNoticeOrder = resData.has_notice_order;
                    this.systemNoticeOrder = resData.system_notice_order;
                    this.hotSearchInput = resData.hot_search_input;
                    this.hotSearchTag = resData.hot_search_tag;
                },
            });
        },

        getWxBannerList: function () {
            uni.request({
                url: this.$apiUrl + "/api/home/bannerList",
                header: {
                    userId: uni.getStorageSync("userId"),
                    userToken: uni.getStorageSync("userToken"),
                    shopId: uni.getStorageSync("shopId"),
                },
                success: (res) => {
                    this.wxBannerList = res.data["data"];
                },
            });
        },

        getWxHomeAd: function () {
            uni.request({
                url: this.$apiUrl + "/api/site/wx-home-ad",
                header: {
                    userId: uni.getStorageSync("userId"),
                    userToken: uni.getStorageSync("userToken"),
                    shopId: uni.getStorageSync("shopId"),
                },
                success: (res) => {
                    this.wxHomeAd = res.data["data"];
                },
            });
        },

        getGoodsCateMain: function () {
            uni.request({
                url: this.$apiUrl + "/api/goods/goodsCate",
                header: {
                    userId: uni.getStorageSync("userId"),
                    userToken: uni.getStorageSync("userToken"),
                    shopId: uni.getStorageSync("shopId"),
                },
                data: { limit: 10 },
                success: (res) => {
                    this.goodsTabs = res.data["data"];
                },
            });
        },

        getGoodsHotList: function (type) {
            uni.request({
                url: this.$apiUrl + "/api/goods/homeHot",
                header: {
                    userId: uni.getStorageSync("userId"),
                    userToken: uni.getStorageSync("userToken"),
                    shopId: uni.getStorageSync("shopId"),
                },
                data: {
                    page_num: this.pageIndex,
                    cate_id: this.cateId,
                },
                success: (res) => {
                    let resData = res.data["data"];
                    this.goodsHotList = resData;
                },
            });
        },

        doSnowStar: function () {},
    },

    //下拉加载刷新
    onPullDownRefresh: function () {
        return false;
        console.log("下拉加载刷新页面");
    },

    //底部加载更多
    onReachBottom: function () {
        return false;
        if (!this.pullUpOn) return;
        this.loadding = true;
        if (this.pageIndex == 5) {
            //最多加载5页数据
            this.loadding = false;
            this.pullUpOn = false;
            this.noMoreData = true;
        } else {
            this.pageIndex = this.pageIndex + 1;
            this.getGoodsHotList("append");
            this.loadding = false;
        }
    },
};
</script>

<style>
page {
    background: #f7f7f7;
}

.container {
    padding-bottom: 100rpx;
    color: #333;
}

/*tabbar*/
.tui-safearea-bottom {
    width: 100%;
    height: env(safe-area-inset-bottom);
}

.tui-ptop-4 {
    padding-top: 4rpx;
}

.tui-scale {
    font-weight: bold;
    transform: scale(0.8);
    transform-origin: center 100%;
    line-height: 30rpx;
}

.tui-item-active {
    color: #e41f19 !important;
}

/*tabbar*/

.tui-header {
    width: 100%;
    height: 100rpx;
    padding: 0 30rpx 0 20rpx;
    box-sizing: border-box;
    background: #e41f19;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
}

.tui-rolling-search {
    width: 100%;
    height: 60rpx;
    border-radius: 35rpx;
    padding: 0 40rpx 0 30rpx;
    box-sizing: border-box;
    background: #fff;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    color: #999;
}

.tui-category {
    font-size: 24rpx;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 0;
    margin-right: 22rpx;
    flex-shrink: 0;
}

.tui-category-scale {
    transform: scale(0.7);
    line-height: 24rpx;
}

.tui-icon-category {
    line-height: 20px !important;
    margin-bottom: 0 !important;
}

.tui-swiper {
    font-size: 26rpx;
    height: 60rpx;
    flex: 1;
    padding-left: 12rpx;
}

.tui-swiper-item {
    display: flex;
    align-items: center;
}

.tui-hot-item {
    line-height: 26rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tui-header-banner {
    padding-top: 20rpx;
    box-sizing: border-box;
    background: #e41f19;
    margin-top: 88rpx;
}

.tui-hot-search {
    color: #fff;
    font-size: 24rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20rpx;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
}

.tui-hot-tag {
    background: rgba(255, 255, 255, 0.15);
    padding: 10rpx 24rpx;
    border-radius: 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 24rpx;
    /* margin-left: 20rpx; */
}

.tui-banner-bg {
    display: flex;
    height: 180rpx;
    background: #e41f19;
    position: relative;
}

.tui-primary-bg {
    width: 50%;
    display: inline-block;
    height: 224rpx;
    border: 1px solid transparent;
    position: relative;
    z-index: 1;
    background: #e41f19;
}

.tui-route-left {
    transform: skewY(8deg);
}

.tui-route-right {
    transform: skewY(-8deg);
}

.tui-banner-box {
    width: 100%;
    padding: 0 20rpx;
    box-sizing: border-box;
    position: absolute;
    /* overflow: hidden; */
    z-index: 99;
    bottom: -110rpx;
    left: 0;
}

.tui-banner-swiper {
    width: 100%;
    height: 300rpx;
    border-radius: 20rpx;
    overflow: hidden;
    transform: translateY(0);
}

.tui-slide-image {
    width: 100%;
    height: 300rpx;
    display: block;
    border-radius: 20rpx;
}

/* #ifdef APP-PLUS || MP */
.tui-banner-swiper .wx-swiper-dot {
    width: 8rpx;
    height: 8rpx;
    display: inline-flex;
    background: none;
    justify-content: space-between;
}

.tui-banner-swiper .wx-swiper-dot::before {
    content: "";
    flex-grow: 1;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 16rpx;
    overflow: hidden;
}

.tui-banner-swiper .wx-swiper-dot-active::before {
    background: #fff;
}

.tui-banner-swiper .wx-swiper-dot.wx-swiper-dot-active {
    width: 16rpx;
}

/* #endif */

/* #ifdef H5 */
>>> .tui-banner-swiper .uni-swiper-dot {
    width: 8rpx;
    height: 8rpx;
    display: inline-flex;
    background: none;
    justify-content: space-between;
}

>>> .tui-banner-swiper .uni-swiper-dot::before {
    content: "";
    flex-grow: 1;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 16rpx;
    overflow: hidden;
}

>>> .tui-banner-swiper .uni-swiper-dot-active::before {
    background: #fff;
}

>>> .tui-banner-swiper .uni-swiper-dot.uni-swiper-dot-active {
    width: 16rpx;
}

/* #endif */

.tui-product-category {
    background: #fff;
    padding: 0 20rpx 30rpx 20rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    font-size: 24rpx;
    color: #555;
    margin-bottom: 20rpx;
    margin-top: 110rpx;
}

.tui-category-item {
    width: 20%;
    height: 118rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    padding-top: 30rpx;
}

.tui-category-img {
    height: 80rpx;
    width: 80rpx;
    display: block;
}

.tui-category-name {
    line-height: 24rpx;
}

.tui-product-box {
    margin-top: 20rpx;
    padding: 0 0rpx;
    box-sizing: border-box;
}

.tui-pb-20 {
    padding-bottom: 20rpx;
}

.tui-bg-white {
    background: #fff;
}

.tui-group-name {
    font-size: 32rpx;
    font-weight: bold;
    text-align: center;
    padding: 24rpx 0;
}

.tui-activity-box {
    display: flex;
    border-radius: 12rpx;
    overflow: hidden;
}

.tui-activity-img {
    width: 50%;
    display: block;
}

.tui-new-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.tui-new-item {
    width: 49%;
    height: 200rpx;
    padding: 0 20rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    background: #f5f2f9;
    position: relative;
    border-radius: 12rpx;
}

.tui-new-mtop {
    margin-top: 2%;
}

.tui-title-box {
    font-size: 24rpx;
}

.tui-new-title {
    line-height: 32rpx;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.tui-new-price {
    padding-top: 18rpx;
}

.tui-new-present {
    color: #ff201f;
    font-weight: bold;
}

.tui-new-original {
    padding-top: 10rpx;
    display: flex;
    color: #a0a0a0;
    /* text-decoration: line-through; */
    padding-left: 10rpx;
    transform: scale(0.8);
    transform-origin: left center;
}

.tui-new-img {
    width: 160rpx;
    height: 160rpx;
    display: block;
    flex-shrink: 0;
}

.tui-new-label {
    width: 56rpx;
    height: 56rpx;
    border-top-left-radius: 12rpx;
    position: absolute;
    left: 0;
    top: 0;
}

.tui-product-list {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
    box-sizing: border-box;
    /* padding-top: 20rpx; */
}

.tui-product-container {
    flex: 1;
    margin-right: 2%;
}

.tui-product-container:last-child {
    margin-right: 0;
}

.tui-pro-item {
    width: 100%;
    margin-bottom: 4%;
    background: #fff;
    box-sizing: border-box;
    border-radius: 12rpx;
    overflow: hidden;
}

.tui-pro-img {
    width: 100%;
    display: block;
}

.tui-pro-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 20rpx;
}

.tui-pro-tit {
    color: #2e2e2e;
    font-size: 26rpx;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.tui-pro-price {
    padding-top: 18rpx;
}

.tui-sale-price {
    font-size: 34rpx;
    font-weight: 500;
    color: #e41f19;
}

.tui-factory-price {
    font-size: 24rpx;
    color: #a0a0a0;
    text-decoration: line-through;
    padding-left: 6rpx;
    margin-top: 5rpx;
}

.tui-pro-pay {
    padding-top: 10rpx;
    font-size: 24rpx;
    color: #656565;
}

.tui-notice-board {
    width: 100%;
    padding-right: 30upx;
    box-sizing: border-box;
    font-size: 28upx;
    height: 60upx;
    background: #fff8d5;
    display: flex;
    align-items: center;
}

.tui-icon-bg {
    background: #fff8d5;
    padding-left: 30upx;
    position: relative;
    z-index: 10;
}

.tui-icon-class {
    margin-right: 12upx;
}

.tui-rolling-news {
    width: 100%;
    padding: 10upx 10upx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
}

.tui-swiper {
    font-size: 26upx;
    height: 46upx;
    flex: 1;
}

.tui-swiper-item {
    display: flex;
    align-items: center;
}

.tui-news-item {
    line-height: 24upx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tui-scorll-view {
    flex: 1;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    color: #f54f46;
}

.tui-notice {
    transform: translateX(100%);
}

.tui-animation {
    -webkit-animation: tui-rolling 12s linear infinite;
    animation: tui-rolling 12s linear infinite;
}

.tui-activity-home-banner {
    /*	display: flex;*/
    border-radius: 12rpx;
    overflow: hidden;
}

.tui-activity-img-home-banner {
    width: 750rpx;
    width: 100%;
    display: block;
}

/* 商品LOGO图片 */
.image-container {
    position: relative;
    display: inline-block;
    /* 根据内容自适应宽度 */
}

/* 主图默认样式 */
.main-image {
    width: 350rpx;
    /* 控制主图显示尺寸 */
    height: auto;
    display: block;
    /* 消除图片底部间隙 */
}

/* 标签图片绝对定位 */
.tag-image {
    position: absolute;
    top: 12rpx;
    /* 距顶部距离 */
    left: 0;
    /* 距右侧距离 */
    width: 166rpx;
    /* 控制标签大小 */
    height: auto;
    /* box-shadow: 0 0 8px rgba(0,0,0,0.3); */
    /* 可选阴影效果 */
}

@-webkit-keyframes tui-rolling {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-170%);
    }
}

@keyframes tui-rolling {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-170%);
    }
}
</style>
